
$size-12    : 25%;
$size-9     : 33%;
$position-12: 25%;
$position-13: 74%;
$position-9 : 33.5%;

html,
body {
  margin          : 0;
  padding         : 0;
  width           : 100%;
  height          : 100%;
  background-color: #FD4135;
}

ul,
li {
  list-style: none;
  box-sizing: border-box;
  margin    : 0;
  padding   : 0;
}

header {
  font-size: 30px;
  color    : #fff;
  padding  : 20px 0;
}

// 9g抽奖转盘布局样式
.award-container {
  width           : 90vw;
  height          : 90vw;
  padding         : 1%;
  margin-left     : 5vw;
  border-radius   : 10px;
  background-color: #D8091A;
  position        : relative;

  .award-item {
    position : absolute;
    // margin: 10px;
    padding  : 2%;
    width    : $size-9;
    height   : $size-9;

    &>div {
      width           : 100%;
      height          : 100%;
      display         : flex;
      border-radius   : 10px;
      background-color: #FDEDEE;
      flex-direction  : column;
      align-items     : center;
      position        : relative;
    }

    .background-img {
      margin          : 10px 0 6px 0;
      width           : 40px;
      height          : 40px;
      border-radius   : 50%;
      // flex: 1;
      background-color: #f66;
    }

    .awardTitle {
      display   : block;
      text-align: center;
    }

    .shade {
      background-color: #FFF600;
    }

    .shade.show {
      background-color: rgba(250, 250, 250, .4);
    }
  }

  // 9宫格布局
  .award-item-0 {
    top : 1%;
    left: 1%;
  }

  .award-item-handle {
    top : $position-9;
    left: $position-9;

    &>div {
      background-color: #FD4135;

      .award-btn {
        color           : #FFF600;
        font-size       : 1rem;
        line-height     : 1.4;
        background-color: #f66;
        border          : none;
      }
    }
  }

  .award-item-1 {
    top : 1%;
    left: $position-9;
  }

  .award-item-2 {
    top  : 1%;
    right: 1%;
  }

  .award-item-3 {
    top  : $position-9;
    right: 1%;
  }

  .award-item-4 {
    right : 1%;
    bottom: 1%;
  }

  .award-item-5 {
    left  : $position-9;
    bottom: 1%;
  }

  .award-item-6 {
    left  : 1%;
    bottom: 1%;
  }

  .award-item-7 {
    left: 1%;
    top : $position-9;
  }
}

// 12宫格布局
.award-container-handle {
  .award-item {
    width    : $size-12;
    height   : $size-12;
    font-size: 12px;
  }

  .award-item-handle {
    width : 50%;
    height: 50%;
    top   : $position-12;
    left  : $position-12;
  }

  .award-item-0 {
    top : 1%;
    left: 1%;
  }

  .award-item-1 {
    top : 1%;
    left: $position-12;
  }

  .award-item-2 {
    top  : 1%;
    right: $position-12;
  }

  .award-item-3 {
    top  : 1%;
    right: 1%;
  }

  .award-item-4 {
    right: 1%;
    top  : $position-12;
  }

  .award-item-5 {
    left  : $position-13;
    bottom: $position-12;
  }

  .award-item-6 {
    left  : $position-13;
    bottom: 1%;
  }

  .award-item-7 {
    left: $position-12 * 2;
    top : $position-13;
  }

  .award-item-8 {
    top : $position-13;
    left: $position-12;
  }

  .award-item-9 {
    bottom  : 1%;
    left    : 1%;
    // float: right;
  }

  .award-item-10 {
    left    : 1%;
    top     : $position-12 * 2;
    // float: right;
  }

  .award-item-11 {
    left    : 1%;
    top     : $position-12;
    // float: right;
  }
}

// 中奖名单样式
@keyframes positionUl {
  from {
    top: 0px
  }

  to {
    top: -210px
  }
}

.winner-list-box {
  &>h4 {
    color     : #fff;
    margin-top: 30px;
  }

  .winner-list {
    height             : 80px;
    // background-color: #f2f2f2;
    padding            : 10px 0;
    overflow           : hidden;
    font-size          : 14px;
    color              : #333;
    position           : relative;

    &>div {
      width                    : 100%;
      position                 : absolute;
      animation-name           : positionUl;
      animation-duration       : 7s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;

      ul {
        width: 100%;
      }

      li {
        height     : 30px;
        line-height: 30px;
        padding    : 0 30px;

        span {
          color  : #fff;
          display: inline-table;
        }

        &>span:first-child {
          width     : 40%;
          text-align: left;
        }

        &>span:last-child {
          width     : 60%;
          text-align: left;
        }
      }
    }

  }
}

// 奖品的弹窗信息
.common-dialog {
  width           : 100vw;
  height          : 100vh;
  position        : fixed;
  top             : 0;
  left            : 0;
  background-color: rgba(0, 0, 0, .5);
  z-index         : 999;

  &>div {
    background-color: #fff;
    padding         : 20px;
    width           : 50vw;
    margin          : 40vh auto;
  }
}